<!-- 头部导航栏组件 -->
<template>
  <view>
    <view class="content" :style="{ overflow: flag === true ? '' : 'hidden' }">
      <!-- <C_top :title="title" /> -->
      <!-- 搜索框 -->
      <view class="slot-wrap">
        <view class="search-wrap">
          <!-- 如果使用u-search组件，必须要给v-model绑定一个变量 -->
          <u-search
            v-model="keyword"
            height="56"
            :action-style="{ color: 'black' }"
            :show-action="false"
            placeholder="请输入项目名称或关键词"
          ></u-search>
        </view>
      </view>
      <!-- 下拉组件 -->
      <C_dropdown
        v-on="$listeners"
        :keyword="keyword"
        @oepn="oepn"
        @close="close"
      />
      <!-- 搜索完显示的条目信息 -->
      <view class="sreach-box">
        搜索到
        <text style="color: #f33535; padding: 0 4rpx">{{ total }}</text>
        条招投标
      </view>
    </view>
    <view
      :style="{ paddingBottom: title === '招投标' ? '236rpx' : '200rpx' }"
    ></view>
  </view>
</template>

<script>
export default {
  // inject: ['getTotal'],
  props: {
    title: {
      type: String,
    },
    total: {
      type: Number,
    },
  },
  // computed: {
  // 	total() {
  // 		return this.getTotal();
  // 	}
  // },
  data() {
    return {
      flag: false,
      backIconName: 'nav-back',
      rightSlot: false,
      useSlot: false,
      background: {
        // 'background-image': 'linear-gradient(45deg, rgb(28, 187, 180), rgb(141, 198, 63))',
        'background-color': '#ffffff',
      },
      isBack: true,
      search: false,
      custom: false,
      isFixed: true,
      keyword: '',
      // #ifdef MP
      slotRight: false,
      // #endif
      // #ifndef MP
      slotRight: true,
      // #endif
    }
  },

  methods: {
    // 获取下拉菜单是关闭还是展开
    oepn(val) {
      this.flag = val
    },
    close(val) {
      this.flag = val
    },
  },
}
</script>

<style lang="scss" scoped>
.content {
  background-color: #fff;
  background-color: #f33535;
  position: fixed;
  width: 100%;
  z-index: 1;
}

.navbar-right {
  margin-right: 24rpx;
  float: right;
  position: absolute;
  right: 0;
}
/deep/ .u-action-active[data-v-4c556b40] {
  display: none;
}
.search-wrap {
  margin: 0 20rpx;
  flex: 1;
}
.slot-wrap {
  padding: 0 20rpx;
  display: flex;
  align-items: center;
  flex: 1;
}
// 统计搜索条盒子
.sreach-box {
  width: 100%;
  height: 76rpx;
  line-height: 76rpx;
  padding-left: 40rpx;
  color: #9a9a9a;
  background: #f7f7f7;
}
</style>
